import { FC } from "react";
import useCounter from "./1-CounterContext";

const CounterContainer: FC = () => {
    const { count, add, minus } = useCounter();
    return (
        <div>
            <h1>Count is: {count}</h1>
            <button className="px-4 py-2 m-1 bg-blue-500 hover:bg-blue-600 text-white rounded-md transition-colors" onClick={add}> add </button>
            <button className="px-4 py-2 bg-orange-500 hover:bg-blue-600 text-white rounded-md transition-colors" onClick={minus}> minus </button>
        </div>
    );
};

export default CounterContainer;